<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache"> 
<meta http-equiv="Expires" content="0">
<title>Honeydew</title>
<!-- Jquery -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.blockUI.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.mask.js"></script>
<!-- carousel -->
<link href="${pageContext.request.contextPath}/css/carousel.css" rel="stylesheet" />
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/bootstrap-3.1.1-dist/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="${pageContext.request.contextPath}/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<!-- responsive -->
<link href="${pageContext.request.contextPath}/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- holder -->
<script src="${pageContext.request.contextPath}/holder/holder.js"></script>
<!-- commons -->
<link href="${pageContext.request.contextPath}/css/commons.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/shop.js"></script>

<!-- Shop -->
<script src="${pageContext.request.contextPath}/js/shop.js"></script>
<!-- Item Image Change -->
<script src="${pageContext.request.contextPath}/js/jquery.tools.min.js"></script>
<link href="${pageContext.request.contextPath}/css/scrollable-buttons.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/css/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function() {
	  // initialize scrollable
	  $(".scrollable").scrollable();
	});
	
	$(".items img").click(function() {
		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }
	 
		// calclulate large image's URL based on the thumbnail URL (flickr specific)
		var url = $(this).attr("src").replace("_t", "");
	 
		// get handle to element that wraps the image and make it semi-transparent
		var wrap = $("#mainImg").fadeTo("medium", 0.5);
	 
		// the large image from www.flickr.com
		var img = new Image();
	 
	
		// call this function after it's loaded
		img.onload = function() {
	 
			// make wrapper fully visible
			wrap.fadeTo("fast", 1);
	 
			// change the image
			wrap.find("img").attr("src", url);
	 
		};
	 
		// begin loading the image from www.flickr.com
		img.src = url;
	 
		// activate item
		$(".items img").removeClass("active");
		$(this).addClass("active");
	 
	// when page loads simulate a "click" on the first image
	}).filter(":first").click();
	
	function changeImg(id) {
        document.getElementById("mainImg").src = document.getElementById(id).src;
    }
</script>

</head>

<!-- body -->
<body>
<s:set var="theme" value="'simple'" scope="page" />
<s:form>
	<div class="container body-base">
		
		<table width="100%">
			<tr>
		    	<td>
		        	<!-- banner -->
		        	<s:include value="header.jsp" />
		        </td>
		    </tr>
		    <tr>
		    	<td>
		        	<!-- content -->
		            <table width="100%">
		            	<tr>
		                	<td width="20%" align="left" valign="top">
		                		<!-- 商品分類連結 -->
								<br />
		                    	<s:include value="index_link.jsp" />
		                    	<s:hidden id="bigSeqid" name="bigSeqid" />
		                    	<s:hidden id="medSeqid" name="medSeqid" />
		                    </td>
		                    <td width="50%" align="center" valign="top">
		                    	<br/>
		                        <!-- 商品圖片 -->
		                        <table class="thumbnails" width="100%" height="100%">
		                        	<tr>
		                        		<td class="thumbnail">
		                        			<img src="<s:property value='sharePath'/>item/<s:property value='itemInformationBo.Number'/>/<s:property value='itemInformationBo.Mainphoto'/>" name="mainImg" class="img-responsive img-item-inside" id="mainImg" />
		                        		</td>
		                        	</tr>
		                        </table>
		                        <s:hidden id="itemInformationBo.Seqid" name="itemInformationBo.Seqid" />
		                        <br />
		                        <!-- 商品輪播 -->
		                        <table width="100%" align="center">
		                            <tr>
		                                <td width="15%" align="center">
		                                    <a class="prev browse left"><img src="${pageContext.request.contextPath}/image/item-inside-prev.jpg" width="48" height="14"/></a>
		                                </td>
		                                <td width="70%" align="center">
		                                    <div class="scrollable">
		                                    <div class="items">
		                                    	<div class="item">
			                                    	<s:iterator var="photo" value="slidePhotoList" status="st">
			                                    		<a href="javascript: return false;" class="" onclick="changeImg('item-img<s:property value='#st.index + 1'/>');">
			                                            	<img class="img-item-little" id="item-img<s:property value='#st.index + 1'/>" src="<s:property value='sharePath'/>item/<s:property value='itemInformationBo.Number'/>/<s:property value='photo'/>" alt="" />
			                                            </a>
			                                            
			                                            <s:if test="((#st.index+1) % 5) == 0">
			                                            	</div>
			                                            	<div class="item">
			                                            </s:if>
			                                    	</s:iterator>
		                                    	</div>
		                                    </div>
		                                  </div>
		                                </td>
		                                <td width="15%" align="center">
		                                    <a class="next browse right"><img src="${pageContext.request.contextPath}/image/item-inside-next.jpg" width="48" height="14"/></a>
		                                </td>
		                            </tr>
		                        </table>
		                    </td>
		                    <td width="30%" align="left" valign="top">
		                    	<br/>
		                        <p class="lead"><s:property value="itemInformationBo.Name"/></p>
		                        <legend>
		                        <p class="font-01"><s:property value="itemInformationBo.Description"/></p>
		                        <p class="font-price">
		                        	$<s:property value="itemInformationBo.Price"/>
		                        </p>
		                        </legend>
		                        <br/>
		                        
		                        <font class="font-01">商品顏色-尺寸 : </font>
		                        <br />
		                        <select id="itemStockBo.Seqid" name="itemStockBo.Seqid">
		                        	<s:iterator value="itemStockList">
		                        		<option value="<s:property value='Seqid'/>"><s:property value="Color"/> - <s:property value="Size"/></option>
		                        	</s:iterator>
		                        </select>
		                        <br />
		                        <br />
		                        
		                        <font class="font-01">商品數量 : </font>
		                        <br />
		                        <select id="orderAmount" name="orderAmount">
		                            <option value="1">1</option>
		                            <option value="2">2</option>
		                            <option value="3">3</option>
		                            <option value="4">4</option>
		                            <option value="5">5</option>
		                        </select>
		                        <br />
		                        <br />
		                        
		                        <button type="submit" class="btn item-addShoppingCar" onclick="ajaxAddShoppingCar();">放入購物車</button>
		                        <br />
		                        <br />
		                        
		                        <div>
		                            <!-- Facebook -->
		                            <a href="javascript: void(window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)) ));"><img src="${pageContext.request.contextPath}/image/fb-icon32X32.png" width="32" height="32" />
		                            <!-- Plurk -->
		                            <a href="javascript: void(window.open('http://www.plurk.com/?qualifier=shares&status=' .concat(encodeURIComponent(location.href)) .concat(' ') .concat('&#40;') .concat(encodeURIComponent(document.title)) .concat('&#41;')));"><img src="${pageContext.request.contextPath}/image/plurk-icon32X32.png" width="32" height="32" />
		                            <!-- Twitter -->
		                            <a href="javascript: void(window.open('http://twitter.com/home/?status='.concat(encodeURIComponent(document.title)) .concat(' ') .concat(encodeURIComponent(location.href))));"><img src="${pageContext.request.contextPath}/image/twitter-icon32X32.png" width="32" height="32" />
		                            <!-- Google plus -->
		                            <a href="javascript: void(window.open('https://plus.google.com/share?url='.concat(encodeURIComponent(location.href)), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'));"><img src="${pageContext.request.contextPath}/image/g+-icon32X32.png" width="32" height="32" />
		                        </div>
		                        
		                        <br/>
		                        <div class="accordion" id="accordion2">
		                            <div class="accordion-group">
		                            <div class="accordion-heading">
		                              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse01">
		                                <img src="${pageContext.request.contextPath}/image/item-inside-01.jpg" width="100" height="16" />
		                              </a>
		                            </div>
		                            <div id="collapse01" class="accordion-body collapse in">
		                              <div class="accordion-inner">
		                              	<s:property value="itemInformationBo.Material"/>
		                              </div>
		                            </div>
		                          </div>
		                          <br />
		                          <div class="accordion-group">
		                            <div class="accordion-heading">
		                              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse02">
		                                <img src="${pageContext.request.contextPath}/image/item-inside-02.jpg" width="100" height="16" />
		                              </a>
		                            </div>
		                            <div id="collapse02" class="accordion-body collapse">
		                              <div class="accordion-inner">
		                                <a  href="#" class="font-01" data-toggle="modal" data-target="#sizePhotoModal">尺寸說明</a>
		                              </div>
		                            </div>
		                            <br />
		                            <%-- <div class="accordion-group">
		                                <div class="accordion-group">
		                                    <div class="accordion-heading">
		                                      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse04">
		                                        <img src="${pageContext.request.contextPath}/image/item-inside-04.jpg" width="100" height="16" />
		                                      </a>
		                                    </div>
		                                    <div id="collapse04" class="accordion-body collapse">
		                                      <div class="accordion-inner">
		                                      	<br />
		                                        <!-- 推薦商品 -->
		                                        <table class="table table-bordered item-inside-promote">
		                                        	<tr>
		                                            	<td>
		                                                	<a href="#" class="img-responsive"><img src="testImg/image10.jpg" /></a>
		                                                </td>
		                                                <td>
		                                                	<a href="#" class="img-responsive"><img src="testImg/image10.jpg" /></a>
		                                                </td>
		                                                <td>
		                                                	<a href="#" class="img-responsive"><img src="testImg/image10.jpg" /></a>
		                                                </td>
		                                                <td>
		                                                	<a href="#" class="img-responsive"><img src="testImg/image10.jpg" /></a>
		                                                </td>
		                                            </tr>
		                                        </table>
		                                        <!-- 推薦商品 -->
		                                        <br />
		                                      </div>
		                                    </div>
		                                </div>
		                            </div> --%>
		                          </div>
		                        </div>
		                    </td>
		                </tr>
		            </table>
		        </td>
		    </tr>
		    <tr>
		    	<td>
		        	<!-- footer -->
		        	<s:include value="footer.jsp" />
		        </td>
		    </tr>
		    <tr>
		    	<td>
		        	<!-- copyright -->
		        	<s:include value="copyright.jsp" />
		        </td>
		    </tr>
		</table>
		
		<!-- size photo -->
		<div class="modal fade" id="sizePhotoModal" tabindex="-1" role="dialog" aria-labelledby="testSizeModalLabel" aria-hidden="true">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header item-inside--testSize-bg-color">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title" id="testSizeModalLabel">商品尺寸表</h4>
		      </div>
		      
		      <div class="modal-body item-inside--testSize-bg-color">
		        <div class="row-fluid" align="center">
		            <img class="img-item-size" src="<s:property value='sharePath'/>item/<s:property value='itemInformationBo.Number'/>/<s:property value='itemInformationBo.Sizephoto'/>" />
		        </div>
		      </div>
		      
		    </div>
		  </div>
		</div>
		<!-- size photo-->
	</div>
</s:form>
</body>
</html>
